<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>学生销假</title>
    <link href="../css/student-cancel.css" rel="stylesheet" type="text/css"/>
    <script charset="utf-8" src="../tools/jquery-3.6.0.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        // 成功
        function confirm() {
            console.log("点击了确认")
        }
    </script>
</head>
<body>
<script type="module">
    import '../xy-ui/index.js';
</script>

<!-- 学生销假应该是能让他看到自己正在进行中的请假任务
 所以,应该是一个表格-->

<xy-table thead="请假编号,学号,姓名,请假时段,请假事由,请假课程,任课老师,辅导员,审核状态,操作">
    <xy-tr th:each="item:${list}">
        <!-- 让单元格居中 -->
        <!--报错是因为我们的路径是动态的。。idea识别不到-->
        <xy-td th:text="${item.leId}"></xy-td>
        <xy-td th:text="${item.id}">1800500926</xy-td>
        <xy-td th:text="${item.name}">谭熙</xy-td>
        <xy-td th:text="${item.duringDate}">2021/07/24至2021/07/30</xy-td>
        <xy-td th:text="${item.reason}">回家种田</xy-td>
        <xy-td th:text="${item.course}">信息资源管理</xy-td>
        <xy-td th:text="${item.teacher}">张海涛</xy-td>
        <xy-td th:text="${item.counselor}">张雪笛</xy-td>
        <xy-td>已通过</xy-td>
        <xy-td>
            <!-- 写个属性key，名字是随意起的，为的是我们在点击的时候可以获取到这行的请假id -->
            <xy-button-group>
                <xy-button th:date="${item.duringDate}" th:key="${item.leId}" type="dashed">提前销假</xy-button>
                <xy-button th:key="${item.leId}" type="danger">延期申请</xy-button>
            </xy-button-group>
        </xy-td>

    </xy-tr>
</xy-table>

<!-- 接下来做弹窗 -->
<!-- <xy-dialog>
    <div>dialog</div>
</xy-dialog> -->
<!-- 这个好像没用 -->
<!-- 这好像是它的一个bug,图标需要放到根目录下才有效果 -->
<!-- 之前是在xy-ui下，现在把他放到了guet-leave-page下 -->

<!-- 野路子，不行不行 ,那就不是这么玩,先放着，不行再换-->
<xy-dialog canceltext="取消" id="postpone" oktext="确 定" title="延期申请" type="confirm">
    <!-- 我们要监听成功和取消的事件 -->
    <xy-form action="/student/cancel/lay" id="layForm" method="post">
        <xy-form-item legend="延期原因">
            <xy-textarea name="reason" placeholder="请填写延长假期的原因以便老师审核"></xy-textarea>
        </xy-form-item>
        <xy-form-item legend="延期至">
            <!-- <xy-date-picker></xy-date-picker> -->
            <!-- 用日期控件有bug.. -->
            <xy-input name="date" pattern="^\d{4}-\d{2}-\d{2}$" placeholder="填写格式为2021-01-01"></xy-input>
        </xy-form-item>
        <input hidden id="whatLeaveId" name="id"/>
    </xy-form>
</xy-dialog>
<script>

    // 这里是销假
    $("xy-button[type='dashed']").click(function () {


        let key = $(this).attr("key");
        let date = $(this).attr("date").split('至')[1];
        date = new Date(date).getTime();

        let now = new Date().getTime();

        date = date - now;

        date = date / 1000 / 60 / 60 / 24;

        date = Math.ceil(date);

        console.log(date);

        if (date > 0) {
            XyDialog.confirm({
                title: '销假提示',//标题
                oktext: '我确认',//确定键文本
                canceltext: '我再想想',//取消键文本
                type: 'info',//类型，可选择以上几类
                ok: function () {
                    XyMessage.info('已成功销假');
                    // 获取到请假id
                    $.get("/student/cancel/complete", {id: key}, function () {
                        // 延迟2秒刷新
                        setTimeout(function () {
                            window.location.reload();
                        }, 2000);

                    });
                },
                cancel: function () {
                    XyMessage.info('你取消了销假');
                },
                content: '你的假期还有' + date + '天结束,你确认销假吗?'
            });
        } else {
            XyMessage.info('已经超过请假时间了，无法销假，你可以申请延期哦');
        }

    });

    // 这里是延期申请
    $("xy-button[type='danger']").click(function () {

        $("#postpone")[0].open = true;
        // 这个[0]的作用：用jQuery获取到的对象是jquery对象，不是原生的dom对象，
        // jQuery获取到的对象可以看成是dom对象数组，
        // 所以可以通过下标的方式将jQuery对象转为普通的dom对象
        let key = $(this).attr("key");
        $("#whatLeaveId").val(key);

        $("#postpone")[0].onsubmit = function () {
            $("#layForm")[0].submit()
            XyMessage.success('申请成功！请留意后续通知');
        }

        $("#postpone")[0].oncancel = function () {
            XyMessage.info('你取消了延期申请哦');
        }


    });


</script>
</body>
</html>
